Intersoft ClientUI Documentation
Customizing UXChart User Experiences
| Intersoft ClientUI 8 > ClientUI Controls > Control Library > Data Visualization Controls Overview > UXChart > Customizing UXChart User Experiences |
UXChart is thoughtfully designed with various great user experience features, many of which are built into the products without requiring additional property sets. This topic provides an in-depth overview of the interaction features available in the UXChart control.
One of key user experiences in UXChart is the dual-mode zooming feature. This feature allows users to intuitively zoom in to focus on certain parts of interesting data, or zoom out to see the overall data of the chart. This feature is particularly useful when you have a lot of data to visualized which are clutterred in the chart.
The zooming capability in UXChart applies to data point, gridline, and axis. There are several zoom mode that can be customized through the ZoomMode property as follows.
There are several input gestures to perform zooming in UXChart, which are explained in the following sections.
You can use mouse wheel to move zoom, in or out, slide in to get zoom in effect and slide out to get slide out effect. Your pointer mouse must be inside chart area in order to work. The position of mouse cursor will determine zoom point position, which means where the zoom will be centered.
Another way to zoom in is to double click on the part where you want the zoom to take action.
Using zoom slider bar in the bottom or left chart. Drag the left thumb or right thumb to the opposite side to reflect how much zoom you want to get, the percentage of zoom that can be applied can be seen from how much the zoom bar remains. You can also customize the appearance of the thumb and the visibility. And zoom bar will appear as the mouse enter the area, and fade out as mouser leave, the thumb will appear as mouse is on top of zoom bar.
You can draw box in chart area to represent how much area percentage zoom you want to apply by simply click and hold the left button, and drag it until the box are drawn. You can activate it by holding the SHIFT key, or using property EnableZoomBox in UXChart. By default the zoom box is not enabled since its gesture is used for panning interaction. However, you can enable this feature by setting the EnableZoomBox property to true.
Otherwise, you can just hold the SHIFT key in your keyboard while click and hold your mouse and then drag your mouse until your mouse pointer create some transparent-like rectangular shape. The zoom box reflects how much zoom coverage to apply on the chart. Finally, you can set the zoom box style through the ZoomBoxStyle property.
Just click and hold your mouse left button and drag it to the left or right until it reached desired position. The panning function also depends on zoom mode. If EnableZoomBox is enabled, you must hold the SHIFT key to perform panning.
Use the zoom bar's center thumb which is located between left and right thumb, just put your mouse pointer between the thumbs and hold/drag your mouse to the left or right direction to move until the desired chart area becomes visible.
You can also determine whether you want to enable zoom animation when zooming by setting the EnableZoomAnimation property. Furthermore. you can also customize the zoom animation effect using the following property.
In certain cases, you may want to set a limit for the depth of the zooming function by setting the MaximumZoomLevel property.
The following example shows how to set maximum zoom level.
| XAML |
Copy Code
|
|---|---|
<Intersoft:UXChart MaximumZoomLevel="5" /> |
|
UXChart supports linked zoom feature in which the zoom properties of a chart, i.e, the zoom level and the zoom position, will be synchronized automatically to the other charts that were configured to link to the main chart. In this case, when users zoom in or zoom out on a chart, all of the linked charts will follow. To enable this feature, simply specify the chart instance's name that you would like to link through the LinkedChart property.
The following example shows how to use the linked zoom feature.
| XAML |
Copy Code
|
|---|---|
<Intersoft:UXChart x:Name="Chart1" LinkedChart="{Binding ElementName=Chart2}" /> <Intersoft:UXChart x:Name="Chart2" /> |
|
There are times when you want to display a chart that already initially zoomed in to certain position without gesture input from users.
To achieve this configuration, simply set the initial zoom by setting the InitialZoomLevel property, and set the InitialZoomPoint property to determine where the zoom will be centered. Note that the value of initial point should be percentage of the screen real estate where 0,0 is the top left most and 1,1 is the bottom right most.
The following example shows how to define initial zoom in UXChart.
| XAML |
Copy Code
|
|---|---|
<Intersoft:UXChart InitialZoomLevel="2,2" InitialZoomPoint="0.5,1" /> |
|
Beside zoom animation, UXChart also includes several built-in animations as follows.
Start up animation is an animation that will be executed when the series is loading for the first time or when the items source of the series are changed at run time. This animation might vary for each series. You can turn on/off the animation through one of the following properties:
Furthermore, you can also customize the AnimationSequence and AnimationSequenceDuration properties which are used to determine which data point should be animated first through AnimationSequence property as follows:
Data point animation is an animation applied when the data point value is changed at run time. To enable this feature, you must set the EnableValueAnimation property to True.
In the above section, you've learnt the basics of charting data visualization and learnt how to visualize your data in the simplest way. The following links describe more advanced concepts and features of the charting control with in-depth explanation and samples.